<template>
    <div class="main">

        <div class="head">
            <RingChart></RingChart>
        </div>
        <div class="content" id="picture"></div>
    </div>
</template>

<script>
    import RingChart from './RingChart'

    export default {
        components: {
            RingChart
        },
        name: "index",
        data() {
            return {}
        },
        created() {
        },

        methods: {},

        mounted() {

            var chartDom = document.getElementById('picture');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    //鼠标悬停提示内容
                    trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    min: 0,
                    max: 1200,
                    type: 'value'
                },
                series: [{
                    color: '#3c90f7',
                    data: [620, 330, 424, 1118, 200, 830, 900, 1050, 620, 220, 1000, 100],
                    type: 'line'
                }]
            };

            option && myChart.setOption(option);
        }

    }
</script>

<style scoped>
    .main {
        height: 450px;
        background: #ffffff;
        margin: 15px 15px 0 15px;
    }

    .main .head {
        height: 100px;
    }

    .main .content {
        height: 75%;
        margin-top: 25px;
    }
</style>
